<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>华科大交易溯源系统</title>
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css">
  <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>


<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <!--<div class="layui-card-header"><a href="/logout">退出</a></div>-->
        <div class="layui-card-body">
          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>查询交易详细记录</legend>
          </fieldset>

          <div class="layui-row" id="search">
            <div class="layui-col-md10">
              <form class="layui-form layui-from-pane" lay-filter="aaa" action="" style="margin-top:20px">

                <div class="layui-form-item">
                  <label class="layui-form-label">溯源码</label>
                  <div class="layui-input-block">
                    <input type="text" name="uid" placeholder="请输入商品标识" autocomplete="off"
                           class="layui-input">
                  </div>
                </div>


                <div class="layui-form-item" style="margin-top:40px">
                  <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit=""
                            lay-filter="searchButton">确认
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
                </div>
              </form>
            </div>
          </div>

          <script type="text/html" id="toolbarDemo">
            <form action="/download" method="post" name="Form" >
              <input id="ids" name="fileNames" type="hidden" />
            </form>
            <div class="layui-form-item" style="text-align: left;">
              <button class="layui-btn " lay-filter="DownBtn" lay-submit>
                <i class="layui-icon">&#xe67c;</i>批量下载</button>
            </div>
          </script>

          <table id="demo" lay-filter="test"></table>

        </div>
      </div>
    </div>
  </div>
</div>


<script src="../../../layuiadmin/layui/layui.js"></script>
<script>
  layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'table'], function () {
    var $ = layui.$,
            form = layui.form,
            table = layui.table;


    //表格数据
    table.render({
        elem: '#demo'
        , totalRow: true
        , id: 'testReload'
        , toolbar: '#toolbarDemo'
        , cols: [
            [ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'uid', title: '溯源码', fixed: 'left', align: "center", totalRowText: '合计'}
                , {field: 'attr', title: '属性', align: "center"}
                , {field: 'time', title: '上链时间', align: "center",sort: "true"}
            ]
        ]
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) {
        var data = obj.data;
        $("#ids").attr("value",data.attr);
        document.Form.submit();
    });


    //监听头工具批量下载事件
    form.on('submit(DownBtn)', function(){
        var data = table.checkStatus('testReload').data;//选中数据表格对象信息
        var ids = []; //存数组
        for(var j = 0,len = data.length; j < len; j++){
            let attr = data[j].attr.split(",")[0]
            console.log(attr)
            ids.push(attr); //id-push到数组
        }
        $("#ids").attr("value", ids); //将ids存到input框内
        document.Form.submit(); // 表单提交
    });

    //监听查找按钮事件
    form.on('submit(searchButton)', function (message) {
      // console.log(message.field);
      var field = message.field;

          table.reload('testReload', {
            url: '/queryRecord'
            , method: 'get'
            , data: field.uid
            , request: {
              pageName: 'page' //页码的参数名称，默认：page
              , limitName: 'limit' //每页数据量的参数名，默认：limit
            }
            , where: {
              uid : field.uid
            }
            , page: {
              curr: 1
            }
          });
      return false
    });


  });
</script>
</body>
</html>